<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style: none;
			}
			.imgs{
				width: 590px;
				height: 470px;
				overflow: hidden;
			}
            .dots{
            	width: 164px;
            	position: absolute;
            	left: 250px;
            	top: 450px;
            	z-index: 999;
            }
            .dot{
            	width: 10px;
            	height: 10px;
            	border: 2px solid #fff;
            	border-radius: 10px;
            	display: inline-block;
            }			
		</style>
	</head>
	<body>
		<div class="ad">
			<ul id="imgs" class="imgs">
				<li class="img_li"><img src="https://imgcps.jd.com/ling4/7040368/5aSn5Yib55Sf5rS76aaG/54Ot6ZSA54iG5qy-5aW96LSn6LSt/p-5bd8253082acdd181d02fa5d/d959da62/cr/s/q.jpg" alt="" /></li>
				<li class="img_li"><img src="https://imgcps.jd.com/img-cubic/creative_server_cia/v1/FocusFullshop/CkJqZnMvdDEvMTY5NTA4LzM1LzM3MTAvNjgyOTcvNjAwOTM1MTFFMmEyMjUxODYvNzRlNGMyMTExOTM0ZGQ5NC5qcGcSCjk5OS10eV8wXzEwATjui3o/cr/s/q.jpg" alt="" /></li>
				<li class="img_li"><img src="https://imgcps.jd.com/img-cubic/creative_server_cia/v1/FocusFullshop/CkJqZnMvdDEvMTcxNTU3LzMvMTYxMjkvOTU1NTMvNjA2Nzc5ODBFZjYxNzc4ZDgvYjU2NjNkMzAzODljZmNkZS5qcGcSCjk5OS10eV8wXzEwATjui3o/cr/s/q.jpg" alt="" /></li>
				<li class="img_li"><img src="https://imgcps.jd.com/ling4/2922989/6LaF5YC85aW954mp5oOg5LiN5YGc/5aW96Iy25aW95rC05aW955Sf5rS7/p-5bd8253082acdd181d02fa75/49596926/cr/s/q.jpg" alt="" /></li>
				<li class="img_li"><img src="https://imgcps.jd.com/img-cubic/creative_server_cia/v1/FocusFullshop/CkNqZnMvdDEvMTIzNTk1LzM4LzE5ODg1LzU5MjA5LzVmYmQwNTlmRTQwNzc2ZGQ5L2UxYzM0ZDFiODcxMmQ3YzMuanBnEgo5OTktdHlfMF8xMAE47ot6/cr/s/q.jpg" alt="" /></li>
				<li class="img_li"><img src="https://imgcps.jd.com/ling4/100006061651/576O5aaG5aW96LSn6LSt/5q-P5pel6ZmQ5pe25oqi6LSt/p-5bd8253082acdd181d02f9fa/7844aab7/cr/s/q.jpg" alt="" /></li>
			</ul>
			<ul class="dots">
				<li class="dot" style="background-color: #fff;"></li>
				<li class="dot"></li>
				<li class="dot"></li>
				<li class="dot"></li>
				<li class="dot"></li>
				<li class="dot"></li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
	//自动切换
//	var num=0;
//		setInterval(function(){
////			写法1.移动图片位置
//			//每隔一秒将一张图片移动到最后
////			var li=document.querySelectorAll('.img_li')[0];
////			var li=document.querySelector('.img_li');
////			var ul=document.getElementById('imgs');
////			var li=ul.firstElementChild;
//			//将第一个li放到ul最后一个元素位置
////			ul.appendChild(li);
//
////          写法2.通过css进行控制图片的显示和隐藏
//          
//          	num++;
//          	//先将所有图片隐藏
//          	//获取所有的图片li
//          	var img_lis=document.querySelectorAll('.img_li');
//          	//遍历数组，对每一张图片的li设置css样式 display none
//          	for(var i=0;i<img_lis.length;i++){
//          		img_lis[i].style.display='none';
//          		
//          	}
//          	//将下标为num的图片显示
//          	if(num==img_lis.length){
//              	num=0
//              }
//              img_lis[num].style.display='block';
//              
//          
//
//
//
//		},2000)


      //2.点击切换
      var dot_lis=document.querySelectorAll('.dot');
      for(var i=0;i<dot_lis.length;i++){
      	(function(i){
      		dot_lis[i].onmouseover=function(){
      		//先隐藏所有图片，然后给所有的小白圈去掉背景色
      		var img_lis=document.querySelectorAll('.img_li');
      		for(var j=0;j<img_lis.length;j++){
      			img_lis[j].style.display='none';
      			dot_lis[j].style.backgroundColor='';
      		}
      		//给当前li加背景色
      		this.style.backgroundColor='white';
      		//显示对应的图片
      		img_lis[i].style.display='block';
      	}
      	})(i);
      	
      }
      
		
		
		
		
		
		
		
	</script>
</html>
